<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>node相同与相等</title>
</head>
<body>
<script>
    // DOM3 新增了两个用于比较节点的方法：isSameNode()和 isEqualNode()。这两个方法都接收
    // 一个节点参数，如果这个节点与参考节点相同或相等，则返回 true。节点相同，意味着引用同一个对
    // 象；节点相等，意味着节点类型相同，拥有相等的属性（nodeName、nodeValue 等），而且 attributes
    // 和 childNodes 也相等（即同样的位置包含相等的值）。来看一个例子：
    // let div1 = document.createElement("div");
    // div1.setAttribute("class", "box");
    // let div2 = document.createElement("div");
    // 这里创建了包含相同属性的两个<div>元素。这两个元素相等，但不相同。

    /**
     * DOM3 也增加了给 DOM 节点附加额外数据的方法。setUserData()方法接收 3 个参数：键、值、
     处理函数，用于给节点追加数据。可以像下面这样把数据添加到一个节点：
     document.body.setUserData("name", "Nicholas", function() {});
     然后，可以通过相同的键再取得这个信息，比如：
     let value = document.body.getUserData("name");
     setUserData()的处理函数会在包含数据的节点被复制、删除、重命名或导入其他文档的时候执
     行，可以在这时候决定如何处理用户数据。处理函数接收 5 个参数：表示操作类型的数值（1 代表复制，
     2 代表导入，3 代表删除，4 代表重命名）、数据的键、数据的值、源节点和目标节点。删除节点时，源
     节点为 null；除复制外，目标节点都为 null。
     let div = document.createElement("div");
     div.setUserData("name", "Nicholas", function(operation, key, value, src, dest) {
     if (operation == 1) {
     dest.setUserData(key, value, function() {}); }
    });
     let newDiv = div.cloneNode(true);
     console.log(newDiv.getUserData("name")); // "Nicholas"
     这里先创建了一个<div>元素，然后给它添加了一些数据，包含用户的名字。在使用 cloneNode()
     复制这个元素时，就会调用处理函数，从而将同样的数据再附加给复制得到的目标节点。然后，在副本
     节点上调用 getUserData()能够取得附加到源节点上的数据。
     *
     * **/
</script>
</body>
</html>